<!--
 * @Author: Nico
-->
<template>
  <UiPdaFormItem :class="{ hidden: info.extension.hidden.value || conditionProperty.hidden }" :info="info">
    <div class="w-full border-b-2 rounded-none uiPdaInput">
      <van-field
        :ref="info._id"
        v-model.trim="formDataModel"
        v-ui-ref="vSetRef"
        autosize
        :class="{ hasPrefix: info.extension.prefixIcon && info.extension.prefixIcon.value }"
        :disabled="info.extension.disabled.value || conditionProperty.disabled"
        enterkeyhint="enter"
        :label="info.extension.label.value"
        label-align="left"
        :left-icon="info.extension.suffixIcon.value ? 'search' : 'none'"
        :name="info.extension.model.value"
        :placeholder="info.extension.placeholder.value"
        :required="info.extension.extendRule.value.required && info.extension.extendRule.value.ChangeSwitch"
        :type="info.extension.type.value"
        @blur="blur($event)"
        @clear="clear(item)"
        @click-left-icon="clickIcon(info, formDataModel)"
        @focus="focus($event)"
        @input="handleChange"
        @keydown="confirm($event, formDataModel)"
      >
        <template v-if="info.extension.switchBtn && info.extension.switchBtn.value" class="mb-2" #button>
          <van-button size="small" type="primary" @click="clickBtn(info, formDataModel)">{{ info.extension.btnName.value }}</van-button>
        </template>
      </van-field>
      <!-- <van-checkbox
        v-if="info.extension.checkBox.value"
        :ref="info._id"
        v-model="checked"
        v-ui-ref="vSetRef"
        :checked-color="checkBoxColor"
        class="checkbox"
        :disabled="info.extension.disabled.value || conditionProperty.disabled"
        icon-size="14px"
        :label-position="info.extension.checkBoxType.value"
        @change="handleCheck"
      >
        {{ info.extension.checkBoxName.value }}
      </van-checkbox> -->
    </div>
  </UiPdaFormItem>
</template>
<script>
  import { defineComponent } from 'vue'
  import { Field, Popup, Picker, Checkbox, Toast, Button } from 'vant'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin } from '@ve/mixin'
  // import { reactive, toRefs } from 'vue'
  import debounce from 'lodash/debounce'
  import isEmpty from 'lodash/isEmpty'
  export default defineComponent({
    name: 'UiPdaInput',
    components: {
      [Field.name]: Field,
      [Popup.name]: Popup,
      [Picker.name]: Picker,
      [Checkbox.name]: Checkbox,
      [Button.name]: Button,
    },
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin],
    data() {
      return {
        checked: true,
        conditionProperty: {
          disabled: false,
          hidden: false,
        },
      }
    },

    computed: {
      checkBoxColor() {
        return this.info.extension.checkBoxColor?.value ? this.info.extension.checkBoxColor?.value : '#000000'
      },
    },
    watch: {
      formDataModel: {
        deep: true,
        handler(newval) {
          if (!newval && newval !== 0) return
          if (this.info.extension.type.value == 'textarea') {
            this.formDataModel = newval.split('\r\n')[0].split('\n').join(',')
          } else {
            this.formDataModel = String(newval)
          }
        },
      },
    },
    methods: {
      $setInput(value) {
        this.formDataModel = String(value)
      },
      clear(item) {
        console.log('item', item)
      },
      // 回车
      enter() {
        this.runEventTask('enter')
        // 2023-8-23测试光标问题
        // const formItem = this.vuiComponents['uiPdaInput_caw8tb'] //获取选中得组件
        // console.log('2023-8-23测试光标问题', formItem, formItem.self.info)
        // formItem && formItem.ref && formItem.ref.blur() //组件失去焦点
        // setTimeout(() => {
        //   formItem && formItem.ref && formItem.ref.focus() //组件聚焦
        // }, 2)
        this.cursorHover()
      },
      //光标自动选中聚焦的输入框
      focus(e) {
        e.target.select()
      },
      blur() {
        this.runEventTask('blur')
      },
      confirm(event) {
        if (event.keyCode == 13) {
          this.enter()
        }
      },
      clickIcon() {
        // let formItem = this.vuiComponents && this.vuiComponents[this.info._id] //获取选中得组件
        // formItem && formItem.ref && formItem.ref.blur() //组件失去焦点
        // // console.log('obj,formDataModel', formItem, this.info._id, obj.extension.model.value, formDataModel)
        // console.log('1111', formItem)
        setTimeout(() => {
          this.runEventTask('clickIcon')
        }, 100)
      },
      //序列号采集按钮
      clickBtn(obj, formDataModel) {
        console.log('clickBtn-----', obj, formDataModel)
        console.log('switchBtn-----', obj.extension.switchBtn.value)
        this.runEventTask('clickBtn')
      },
      // handleChange() {
      //   this.onChange()
      //   const regex = new RegExp(this.info.extension.regexp.value)
      //   if (!regex.test(this.formDataModel)) {
      //     this.formDataModel = ''
      //     Toast(this.info.extension.regexpMsg.value)
      //   }
      // },
      handleChange: debounce(function () {
        // 数字型
        if (this.info.extension.type.value == 'num') {
          if (!isEmpty(this.$store.getters['tmp/getRegular'])) {
            const valueType = `/^\\d+(\\.(?!.*0$)\\d{0,${this.$store.getters['tmp/getRegular']}})?$/`
            let test = eval(valueType).test(Number(this.formDataModel))
            console.log('test', test)
            if (!test) {
              this.formDataModel = ''

              Toast(`请输入正确格式的${this.info.extension.label.value}`)
            }
          }
        } else {
          this.onChange()
          const regex = new RegExp(this.info.extension.regexp.value)
          if (!regex.test(this.formDataModel)) {
            this.formDataModel = ''
            Toast(this.info.extension.regexpMsg.value)
          }
        }
      }, 1500),

      handleCheck() {
        console.log('复选this.checked', this.checked, this)
        this.onChange()
        // 触发条件判断值改变
        this.setPageModulesState('value', this.checked)
      },
    },
  })
</script>
<style lang="scss" scoped>
  .uiPdaInput {
    :deep() .hasPrefix .el-input__inner {
      padding-left: 25px;
    }
    :deep() .van-field__label {
      width: 74% !important;
    }
    :deep() .van-cell {
      padding: 0rem !important;
      display: flex;
      flex-wrap: wrap;
    }
    :deep() .van-field__value {
      overflow: visible;
      width: 100%;
      flex: none !important;
      white-space: pre-line !important;
    }
    :deep() .van-field__control {
      text-indent: 10px !important;
      font-size: 0.8rem !important;
    }
    :deep() .van-icon-search {
      color: rgb(42, 119, 182);
      font-size: 1rem !important;
    }
    :deep() .van-field__label--center {
      font-size: 0.8rem !important;
      padding: 0.5rem 0rem;
    }
    :deep() .van-cell__title {
      font-size: 0.8rem !important;
    }
    :deep() .van-field__left-icon {
      margin: 0rem !important;
      width: 0.8rem !important;
    }

    :deep() .checkbox {
      font-size: 0.6rem;
      position: absolute;
      top: 5%;
      left: 35%;
    }
  }
</style>
